<template>
  <div class="login_container"> 
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginforms">
          <h1>Hello</h1>
          <h2>欢迎来到优选平台</h2>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">登录</el-button>
          </el-form-item>  
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import {User,Lock} from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus';
import { reactive,ref} from 'vue';
import useUserStore from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { Get_Time } from '@/utils/time';
import { useRoute } from 'vue-router';
let $route=useRoute()
let loading=ref(false)
let $router=useRouter()
let useStore=useUserStore()
let loginForm=reactive({username:'admin',password:'111111'})
//拿到表单实例
let loginforms=ref()
//自定义校验规则
const validatorusername = (rules: any, value: any, callback: any) => {
  if(value.length<5 || value.length>11){
    callback(new Error('账号长度必须5到11位'))
  }else{
    callback()
  }
}
const validatorpassword = (rules: any, value: any, callback: any) => {
  if(value.length<6){
    callback(new Error('密码长度至少6位'))
  }else{
    callback()
  }
}

//发请求
const login=async ()=>{
  //保证全部表单校验通过过后才可以发请求,校验成功时validate()方法返回一个成功promise对象否则返回失败的peomise对象
  await loginforms.value.validate()
  loading.value=true
  try {
    await useStore.userLogin(loginForm);
    //判断：如果有query参数则跳到query指定路径，如果没有则跳到首页
    let redirect:any =$route.query.redirect
    $router.push({path:redirect||'/'})
    window.location.reload();
    ElNotification({
      type:'success',
      message:'登录成功',
      title:`Hello!${Get_Time()}`
    })
    
    loading.value=false
    
  } catch (error) {
    ElNotification({
      type:'error',
      message:(error as Error).message
    })
    loading.value=false
  }
}
  //登录表单校验按钮
  const rules=reactive({
    username:[
        // {required:true,min: 3, max: 5,message:'用户名必须为3到5位',trigger:"change"}
        {trigger:"change",validator:validatorusername}
    ],
    password:[
    // {required:true,min: 6, max:11,message:'密码至少6位',trigger:"change"}
    {trigger:"change",validator:validatorpassword}
    ]
  })
</script>



<style scoped lang='scss'>
  .login_container{
    width: 100%;
    height: 100vh;
    background:url('@/assets/images/backgrounds.jpg') no-repeat;
    background-size: cover;
    
  }
  .login_form{
    position: relative;
    width: 80%;
    top: 30vh;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;
    padding: 40px;
    h1{
      color:white;
      font-size: 40px;
    }
    h2{
      color: white;
      font-size: 20px;
      margin: 20px 0px;
    }
    .login_btn{
      width: 100%;
    }
  }
</style>
